<!DOCTYPE html>
<html>
<head>
    <title>隧道监测系统 - 总览</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map-container { height: 500px; }
        .status-normal { color: #28a745; }
        .status-warning { color: #ffc107; }
        .status-offline { color: #dc3545; }
        .alert-card { transition: all 0.3s ease; }
        .alert-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .critical-alert { border-left: 5px solid #dc3545; }
        .warning-alert { border-left: 5px solid #ffc107; }
        .info-alert { border-left: 5px solid #17a2b8; }
    </style>
</head>
<body>
    <div class="container-fluid mt-3">
        <h2>隧道监测系统总览</h2>
        
        <!-- 状态概览卡片 -->
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="card text-white bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">传感器总数</h5>
                        <h3 id="total-sensors" class="card-text">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-success">
                    <div class="card-body">
                        <h5 class="card-title">正常</h5>
                        <h3 id="normal-sensors" class="card-text">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-warning">
                    <div class="card-body">
                        <h5 class="card-title">预警</h5>
                        <h3 id="warning-sensors" class="card-text">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-danger">
                    <div class="card-body">
                        <h5 class="card-title">离线</h5>
                        <h3 id="offline-sensors" class="card-text">0</h3>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div id="map-container" class="border rounded"></div>
            </div>
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-header">传感器列表</div>
                    <div class="card-body p-0">
                        <ul id="sensor-list" class="list-group list-group-flush"></ul>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">最新告警</div>
                    <div class="card-body p-0">
                        <div id="alert-list" class="list-group list-group-flush">
                            <div class="list-group-item text-center py-3">
                                <small class="text-muted">加载中...</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-md-8">
                <div id="data-chart" style="height: 400px;"></div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">工程信息</div>
                    <div class="card-body">
                        <div id="project-info">
                            <p class="text-muted">选择传感器查看所属工程信息</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <script>
        $(function() {
            const sensors = JSON.parse('{{ sensors|escapejs }}');
            
            // 初始化地图
            initMap(sensors);
            
            // 初始化传感器列表
            initSensorList(sensors);
            
            // 初始化实时数据刷新定时器
            let refreshInterval = null;
            let currentSensorId = null;
        });
        
        function initMap(sensors) {
            // 这里将实现地图初始化逻辑
            console.log('初始化地图', sensors);
        }
        
        function initSensorList(sensors) {
            const $list = $('#sensor-list');
            $list.empty();
            
            sensors.forEach(sensor => {
                const statusClass = `status-${sensor.status}`;
                $list.append(`
                    <li class="list-group-item d-flex justify-content-between align-items-center" 
                        data-id="${sensor.id}">
                        <span>
                            <span class="${statusClass}">●</span>
                            ${sensor.name}
                        </span>
                        <span class="badge bg-secondary">${sensor.type}</span>
                    </li>
                `);
            });
            
            // 点击事件
            $list.on('click', 'li', function() {
                const sensorId = $(this).data('id');
                loadSensorData(sensorId);
            });
        }
        
        function loadSensorData(sensorId) {
            currentSensorId = sensorId;
            
            // 清除之前的定时器
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }
            
            // 加载实时数据
            loadRealtimeData(sensorId);
            
            // 设置定时刷新
            refreshInterval = setInterval(() => {
                loadRealtimeData(sensorId);
            }, 5000); // 每5秒刷新一次
        }
        
        function loadRealtimeData(sensorId) {
            $.get(`/sensor/${sensorId}/data/`, function(data) {
                updateChart(data);
            }).fail(function() {
                console.error('加载实时数据失败');
            });
        }
        
        function loadHistoryData(sensorId, startDate, endDate) {
            $.get(`/compare/?sensor_id=${sensorId}&start_date=${startDate}&end_date=${endDate}`, 
                function(data) {
                    updateChart(data);
                }
            ).fail(function() {
                console.error('加载历史数据失败');
            });
        }
        
        function updateChart(data) {
            const chart = echarts.init(document.getElementById('data-chart'));
            
            // 处理时间戳
            const timestamps = data.map(item => item.timestamp);
            
            // 准备图表选项
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['应力值', '位移量', '渗流量']
                },
                xAxis: {
                    type: 'category',
                    data: timestamps
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '应力值',
                        type: 'line',
                        data: data.map(item => item.stress)
                    },
                    {
                        name: '位移量',
                        type: 'line',
                        data: data.map(item => item.displacement)
                    },
                    {
                        name: '渗流量',
                        type: 'line',
                        data: data.map(item => item.seepage)
                    }
                ]
            };
            
            chart.setOption(option);
        }
    </script>
</body>
</html>